<template>
  <div class="hot_video_box">
    <choice class="choice01" @formatwdate="formatwdate" @formatwdate1="formatwdate1" :show="2"></choice>
    <div class="list_public">
      <van-loading size="24px" vertical type="spinner" v-if="loading_01">拼命加载中...</van-loading>
      <van-list
        v-if="table_data01.length"
        v-model="loading"
        :finished="finished"
        :finished-text="permissions || (!loading_01 && isQzss) ? '' : '我是有底线的～'"
        @load="onLoad"
        :immediate-check="false"
      >
        <div class="lp_box" v-for="(item, i) in table_data01" :key="'table' + i">
          <i class="rank_num" v-if="i <= 8">{{i+1}}</i>
          <i class="ordinary_num" v-else>{{i+1}}</i>
          <div class="lp_header">
            <div class="lp_cover_box head_video" @click="goPage(item.url)">
              <div class="lp_cover">
                <img :src="item.thum_pic" v-errorImg:video v-if="item.thum_pic" />
                <img :src="errorImg" v-else>
              </div>
            </div>
            <div class="lp_title" @click="goDetailsPage(item.aweme_id)">
                <div class="lp_title_item">
                  <span>{{ item.title }}</span>
                </div>
              <div class="lp_user" @click="$router.push('/talentdetails?id='+item.authorId)">
                <div class="lp_item_head"><img v-lazy="item.logo" v-errorImg:talent /></div>
                <p><span>{{ item.nickname }}</span><span>{{timestamp(item.release_time,'M-D h:m')}}</span></p>
              </div>
            </div>
          </div>
          <div class="lp_footer" @click="goDetailsPage(item.aweme_id)">
            <div class="lpf_item"><strong>{{ format_num(item.favorite_count) }}</strong><span>点赞数</span></div>
            <div class="lpf_item"><strong>{{ format_num(item.comment_count) }}</strong><span>评论数</span></div>
            <div class="lpf_item"><strong>{{ format_num(item.share_count) }}</strong><span>转发数</span></div>
          </div>
        </div>
        <p class="nothingWl" v-if="!loading_01 && isQzss && !permissions">我是有底线的~</p>
        <noPower v-if="permissions" :icon="false" :isRank="true" />
      </van-list>
      <div class="bottom_Collection" v-if="!table_data01.length && !loading_01">
        <img src="@/assets/three/noData.png" alt />
        <p>暂无数据</p>
      </div>
    </div>
  </div>
</template>

<script>
import radio_group from '@/component/screen1';
import search from '@/component/search';
import choice from './component/choice.vue';
// import VConsole from 'vconsole';
// let vConsole = new VConsole();
export default {
  name: '',
  components: {
    choice,
    radio_group,
    search
  },

  data() {
    return {
      valueSerach: '',
      loading_01: false,
      permissions: false, //权限
      CategoryId: 0, // "商品id"
      page: 1,
      table_data01: [],
      //触底
      loading: false,
      finished: false,
      pageSize: 30,
      isQzss: false,
      sDate: '24h', //筛选-日期/时间，默认24小时 - 3d 7d 30d 90d
      sCategoryId: 0, //筛选-达人行业id
      sGender: 3, //筛选-性别  1男 2女 3不限
      sDuration: '不限', //筛选-时长
      isPro: 0 //是否带货0不带，1带
    };
  },
  computed: {},
  watch: {},
  destroyed() {},
  created() {
    if (window.pageYOffset != 0) {
      window.pageYOffset = 10;
    }
    this.finished = false;
    this.valueSerach = '';
    this.permissions = false;
    this.page = 1;
    this.CategoryId = 0;
    this.table_data01 = [];
    this.getListData();
  },
  mounted() {},
  methods: {
    goPage(url){
      location.href = url;
    },
    toSearch() {
      this.$router.push({
        path: '/searchHistory',
        query: { value: 1, name: this.valueSerach }
      });
    },
    //跳视频详情页
    goDetailsPage(id) {
      this.$router.push({ path: '/videodetailsMain', query: { id: id } });
    },
    //子组件传来的日期筛选条件值
    formatwdate(dateStr) {
      this.page = 1;
      this.sDate = dateStr;
      this.table_data01 = [];
      this.getListData();
    },
    formatwdate1(sObj) {
      this.sCategoryId = sObj.categoryId;
      this.sGender = sObj.gender;
      this.sDuration = sObj.duration;
      this.isPro = sObj.isPro;
      this.page = 1;
      this.table_data01 = [];
      this.getListData();
    },
    // 获取热门视频榜数据
    getListData() {
      this.loading = true;
      this.loading_01 = true;
      this.permissions = false;
      this.finished = false;
      this.isQzss = Boolean(this.valueSerach);
      this.$axios
        .post('/api/aweme/search', {
          keyword: this.valueSerach ? this.valueSerach : "",
          size: this.pageSize,
          page: this.page,
          category: this.sCategoryId,
          duration: this.sDuration,
          favorite_count: '不限',
          is_pro: this.isPro,
          more_age: '不限',
          more_gender: this.sGender,
          more_province: '不限',
          more_city: '不限',
          time: this.sDate,
          order_by: 'desc',
          sort: 'favoriteCount'
        })
        .then(res => {
          this.loading = false;
          this.loading_01 = false;
          if (res.data.code == 0) {
            this.table_data01 = this.table_data01.concat(res.data.data);
            this.finished = false;
            if (
              res.data.data.length < this.pageSize &&
              res.data.data.length
            ) {
              this.finished = true;
            }
          }
          if (res.data.code == 1003 || res.data.code1 == 1013) { //code1:1013个数权限不够 - code1专门给前端用
            this.permissions = true;
            this.finished = true;
          }
        })
        .catch(err => {
          this.loading = false;
          this.loading_01 = false;
          this.finished = true;
          console.log(err);
        });
    },
    searchFn(searchVal) {
      this.valueSerach = searchVal;
      this.page = 1;
      this.permissions = false,
      this.finished = false;
      this.table_data01 = [];
      this.getListData();
    },
    //触底
    onLoad() {
      if (this.page * this.pageSize > this.table_data01.length) {
        this.loading = false;
        this.finished = true;
      } else if (this.table_data01.length) {
        this.loading = true;
        this.page = this.page + 1;
        this.getListData();
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
@import '~@/common/list_public.styl';
.hot_video_box {
  .nothingWl {
    font-size: 0.346667rem;
    color: #888;
    padding-bottom: 1.6rem;
    margin-bottom: 0;
    span {
      color: #fd7f2c;
    }
  }
  a {
    text-decoration: none;
  }
  #sales {
    background: #f1f1f1;
    .rank1 {
      background: #f1f1f1;
      height: 0.466667rem;
      line-height: 0.58rem;
      border-radius: 0.226667rem;
      position: absolute;
      top: -0.183333rem;
      left: -0.1rem;
      font-size: 0.373333rem;
      padding-left: 0.12rem;
      padding-right: 0.12rem;
      text-align: center;
      font-family: DINPro-Medium;
      color: #666666;
      z-index: 1;
    }
    .box {
      width: 92%;
      margin: 0 auto;
      border: 1px solid transparent;
      border-radius: 8px;
      background: #fff;
      margin-bottom: 0.2rem;
      padding: 0.266rem 0.266rem 0;
      box-sizing: border-box;
      // 图片+标题
      .boxtop {
        position: relative;
        .img_title {
          display: flex;
          .rank {
            position: absolute;
            top: -0.2rem;
            left: -0.1rem;
            z-index: 1;
            width: 0.62rem;
            height: 0.52rem;
            background: url(../../assets/two/fire.png) no-repeat center;
            background-size: 100% 100% !important;
            box-sizing: 100%;
            p {
              font-family: DINPro-Medium;
              font-size: 0.373333rem;
              color: #666666;
              text-align: center;
              line-height: 0.56rem;
            }
          }
          .img {
            position: relative;
            display: block;
            width: 1.333333rem;
            height: 1.333rem;
            border-radius: 0.266667rem;
            margin-right: 0.266667rem;
            margin-bottom: 0.4rem;
            overflow: hidden;
            flex-shrink: 0;
            img {
              display: block;
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
            i {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              display: inline-block;
              width: 0.586667rem;
              height: 0.586667rem;
              background: url(../../assets/img/play_s.png) no-repeat center;
              background-size: 100% 100% !important;
            }
          }
          .title {
            padding-left: 0;
            &:after {
              display: none;
            }
            p {
              width: 7.066667rem;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              img {
                display: inline-block;
                width: 0.44rem;
                height: 0.4rem;
                margin-top: -0.08rem;
              }
            }
            font-size: 0.373333rem;
            color: #222;
            padding-top: 0.066667rem;
            .talent_box {
              display: flex;
              align-items: center;
              margin-top: 0.133333rem;
              .t_head {
                width: 0.506667rem;
                height: 0.506667rem;
                border-radius: 100%;
                overflow: hidden;
                margin-right: 0.133333rem;
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
              }
              .t_name {
                font-size: 0.32rem;
                margin-right: 0.133333rem;
                color: #666;
              }
              .t_date {
                font-size: 0.32rem;
                color: #888;
              }
            }
          }
        }
      }
      .boxbot {
        .num {
          display: flex;
          justify-content: space-around;
          padding-bottom: 0.4rem;
          div {
            text-align: center;
            p {
              font-size: 0.373333rem;
              color: #222;
              font-family: Dinpro-medium;
            }
            span {
              display: block;
              font-size: 0.293333rem;
              color: #888;
            }
          }
        }
      }
    }
    .bot {
      display: flex;
      width: 9.2rem;
      height: 0.88rem;
      line-height: 0.906667rem;
      background-color: #f4f9ff;
      border-radius: 0.44rem;
      border: solid 0.02rem #1779ff;
      margin: 0 auto;
      margin-bottom: 1.506667rem;

      p {
        margin-left: 0.6rem;
        font-size: 0.346667rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 1px;
        color: #222222;
      }
      a {
        font-size: 0.346667rem;
        color: #1779ff;
      }
    }
  }

   .bottom_Collection {
    img {
      margin: 0 auto;
      width: 4rem;
      height: 3.2rem;
      margin-top: 4rem;
      display: block;
    }
    p {
      text-align: center;
      font-size: 0.346667rem;
      line-height: 0.4rem;
      color: #888888;
    }
    span {
      color: #fd7f2c;
    }
  }

  .choice {
    width: 5.333333rem;
  }

  .color {
    color: #888;
  }
}
</style>
